<template>
  <div class="infomation">
      <a-tabs default-active-key="1" size="large">
        <a-tab-pane key="1" tab="个人信息">
            <div class="form">
                <p class="title">
                    手机号：
                </p>
                <a-input :disabled="true" v-model="phone" placeholder="请输入您的手机号" />
                <p class="func" @click="changePhone">更换手机号</p>
            </div>
            <div class="form">
                <p class="title">
                    性别：
                </p>
                <a-select v-model="sex" style="width: 296px" @change="sexChange">
                    <a-select-option value="1">
                        男
                    </a-select-option>
                    <a-select-option value="2">
                        女
                    </a-select-option>
                    <!-- <a-select-option value="3">
                        未知
                    </a-select-option> -->
                </a-select>
                <svg style="cursor:pointer;" t="1637996920626" @click="changeMyMsg('sex')" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="32" height="32"><path d="M508.9 601.9h-0.3c-7.7-0.1-14.9-3.7-19.5-9.8L402.4 479c-8.4-10.9-6.3-26.6 4.6-35 10.9-8.4 26.6-6.3 35 4.6l67.4 87.8 168.8-209.7c8.7-10.7 24.4-12.4 35.1-3.8 10.7 8.6 12.4 24.4 3.8 35.1L528.3 592.6c-4.7 5.9-11.9 9.3-19.4 9.3z" fill="#586168" p-id="2713"></path><path d="M671.6 718.5H345.9c-22.9 0-41.6-18.7-41.6-41.6V352.2c0-22.9 18.7-41.6 41.6-41.6h225.8c13.8 0 25 11.2 25 25s-11.2 25-25 25H354.2v308h309V485.4c0-13.8 11.2-25 25-25s25 11.2 25 25v191.5c0 22.9-18.7 41.6-41.6 41.6z" fill="#586168" p-id="2714"></path></svg>
                <!-- <a-icon @click="changeMyMsg('sex')" type="edit" /> -->
            </div>
            <div class="form" v-if="disaAuthFlag == 'Y' || voluntAuthFlag == 'Y' || $store.state.roleType == 3">
                <p class="title">
                    年龄：
                </p>
                <a-input placeholder="请输入年龄" :value="getage"/>
            </div>
            <div class="form"  v-if="!(voluntAuthFlag == 'Y' || disaAuthFlag == 'Y' || $store.state.roleType == 3)">
                <p class="title">
                    出生日期：
                </p>
                <a-date-picker :allowClear="false" :inputReadOnly="true" v-model="birthday" style="width:296px;" @change="birthdaychange" placeholder="请选择出生年月日" format="YYYY-MM-DD" >
                    <a-icon slot="suffixIcon" type="down" />
                </a-date-picker>
                <svg style="cursor:pointer;" t="1637996920626" @click="changeMyMsg('birthday')" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="32" height="32"><path d="M508.9 601.9h-0.3c-7.7-0.1-14.9-3.7-19.5-9.8L402.4 479c-8.4-10.9-6.3-26.6 4.6-35 10.9-8.4 26.6-6.3 35 4.6l67.4 87.8 168.8-209.7c8.7-10.7 24.4-12.4 35.1-3.8 10.7 8.6 12.4 24.4 3.8 35.1L528.3 592.6c-4.7 5.9-11.9 9.3-19.4 9.3z" fill="#586168" p-id="2713"></path><path d="M671.6 718.5H345.9c-22.9 0-41.6-18.7-41.6-41.6V352.2c0-22.9 18.7-41.6 41.6-41.6h225.8c13.8 0 25 11.2 25 25s-11.2 25-25 25H354.2v308h309V485.4c0-13.8 11.2-25 25-25s25 11.2 25 25v191.5c0 22.9-18.7 41.6-41.6 41.6z" fill="#586168" p-id="2714"></path></svg>
                <!-- <a-icon @click="changeMyMsg('birthday')" type="edit" /> -->
            </div>
            <div class="form">
                <p class="title">
                    所在行业：
                </p>
                <a-input v-model="occupationCode" placeholder="请填写行业信息" />
                <svg style="cursor:pointer;" t="1637996920626" @click="changeMyMsg('occupationCode')" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="32" height="32"><path d="M508.9 601.9h-0.3c-7.7-0.1-14.9-3.7-19.5-9.8L402.4 479c-8.4-10.9-6.3-26.6 4.6-35 10.9-8.4 26.6-6.3 35 4.6l67.4 87.8 168.8-209.7c8.7-10.7 24.4-12.4 35.1-3.8 10.7 8.6 12.4 24.4 3.8 35.1L528.3 592.6c-4.7 5.9-11.9 9.3-19.4 9.3z" fill="#586168" p-id="2713"></path><path d="M671.6 718.5H345.9c-22.9 0-41.6-18.7-41.6-41.6V352.2c0-22.9 18.7-41.6 41.6-41.6h225.8c13.8 0 25 11.2 25 25s-11.2 25-25 25H354.2v308h309V485.4c0-13.8 11.2-25 25-25s25 11.2 25 25v191.5c0 22.9-18.7 41.6-41.6 41.6z" fill="#586168" p-id="2714"></path></svg>
                <!-- <a-icon @click="changeMyMsg('occupationCode')" type="edit" /> -->
            </div>
            <div class="form">
                <p class="title">
                    居住地：
                </p>
                <a-input v-model="pgAddressNo" placeholder="请填写添加居住地" />
                <svg style="cursor:pointer;" t="1637996920626" @click="changeMyMsg('pgAddressNo')" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="32" height="32"><path d="M508.9 601.9h-0.3c-7.7-0.1-14.9-3.7-19.5-9.8L402.4 479c-8.4-10.9-6.3-26.6 4.6-35 10.9-8.4 26.6-6.3 35 4.6l67.4 87.8 168.8-209.7c8.7-10.7 24.4-12.4 35.1-3.8 10.7 8.6 12.4 24.4 3.8 35.1L528.3 592.6c-4.7 5.9-11.9 9.3-19.4 9.3z" fill="#586168" p-id="2713"></path><path d="M671.6 718.5H345.9c-22.9 0-41.6-18.7-41.6-41.6V352.2c0-22.9 18.7-41.6 41.6-41.6h225.8c13.8 0 25 11.2 25 25s-11.2 25-25 25H354.2v308h309V485.4c0-13.8 11.2-25 25-25s25 11.2 25 25v191.5c0 22.9-18.7 41.6-41.6 41.6z" fill="#586168" p-id="2714"></path></svg>
                <!-- <a-icon @click="changeMyMsg('pgAddressNo')" type="edit" /> -->
            </div>
            <div class="form" style="border:0;" v-if="disaAuthFlag !== 'Y' && voluntAuthFlag !== 'Y' && $store.state.roleType != 3">
                <p class="title">
                    认证身份：
                </p>
                <p class="btn" @click="authentication = !authentication">开始认证</p>
            </div>
            <div class="certificationType" v-show="authentication">
                <div @click="disavilityFlag">
                    <img src="@/assets/image/employment/disabled.png" alt="">
                    <p class="type">残疾人认证</p>
                    <p class="benefit">认证领福利</p>
                </div>
                <div @click="VolunteerFlag">
                    <img src="@/assets/image/employment/helper.png" alt="">
                    <p class="type">志愿者认证</p>
                    <p class="benefit">认证领福利</p>
                </div>
                <div @click="$message.error('暂未开放')">
                    <img src="@/assets/image/employment/enterprise.png" alt="">
                    <p class="type">企业认证</p>
                    <p class="benefit">认证领福利</p>
                </div>
            </div>
            <!-- 残疾人认证 -->
            <DisabilityCertification @clearflag="clearflag" @getUserInfo="getUserInfo" ref="DisabilityCertification" />

            <!-- 志愿者认证 -->
            <VolunteerCertification @clearflag="clearflag" @getUserInfo="getUserInfo" ref="VolunteerCertification" />
            <div class="form" v-if="voluntAuthFlag == 'Y' || disaAuthFlag == 'Y' || $store.state.roleType == 3">
                <p class="message">
                    认证信息
                </p>
                <p class="btn" v-if="voluntAuthFlag == 'Y' || $store.state.roleType == 3" @click="disavilityFlag">认证残疾人</p>
            </div>
            <div class="form" v-if="voluntAuthFlag == 'Y' || disaAuthFlag == 'Y' || $store.state.roleType == 3">
                <p class="title">
                    认证身份：
                </p>
                <a-input :value="voluntAuthFlag == 'Y' || $store.state.roleType == 3?'志愿者':disaAuthFlag == 'Y'?'残疾人':''"  :disabled="true"/>
            </div>
            <div class="form" v-if="voluntAuthFlag == 'Y' || disaAuthFlag == 'Y' || $store.state.roleType == 3">
                <p class="title">
                    姓名：
                </p>
                <a-input :value="userInfo?userInfo.name:''"  :disabled="true"/>
            </div>
            <div class="form" v-if="voluntAuthFlag == 'Y' || disaAuthFlag == 'Y' || $store.state.roleType == 3">
                <p class="title">
                    身份证号：
                </p>
                <a-input :value="idNo"  :disabled="true"/>
            </div>
            <div class="form" v-if="disaAuthFlag == 'Y' && userInfo.disaNo">
                <p class="title">
                    残疾证号：
                </p>
                <a-input :value="disaNo"  :disabled="true"/>
            </div>
            <div class="form" v-if="disaAuthFlag == 'Y'">
                <p class="title" style="width:120px;">
                    残疾类别/等级：
                </p>
                <a-cascader
                    style="width:320px;"
                    :value="[userInfo.disaType,userInfo.disaLevel]"
                    :options="listTree"
                    placeholder="残疾类别/等级"
                    :disabled="true"
                    :fieldNames='fieldNames'
                />
                <!-- <a-input :value="userInfo."/> -->
            </div>
            <div class="form" v-if="disaAuthFlag == 'Y' && userInfo.disaAuthDesc" style="width:800px;">
                <p class="title">
                    残疾说明：
                </p>
                <a-textarea :disabled="true" :auto-size="{ minRows: 1, maxRows: 5 }" :value="userInfo.disaAuthDesc"/>
            </div>
            <div class="form" v-if="(voluntAuthFlag == 'Y' || $store.state.roleType == 3) && userInfo && userInfo.voluntAuthDesc" style="width:800px;">
                <p class="title">
                    志愿说明：
                </p>
                <a-textarea :disabled="true" :auto-size="{ minRows: 1, maxRows: 5 }" :value="userInfo ? userInfo.voluntAuthDesc:''"/>
            </div>
            <!-- <div class="certificates">
                <div class="left">
                    <p class="title">身份证</p>
                    <div class="content">
                        <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                        >
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                            <img v-else src="@/assets/image/employment/just.png" alt="">
                        </a-upload>
                        <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                        >
                            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                            <img v-else src="@/assets/image/employment/back.png" alt="">
                        </a-upload>
                    </div>
                </div>
                <div class="right">
                    <p class="title">残疾证</p>
                    <a-upload
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                    >
                        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                        <img v-else src="@/assets/image/employment/just.png" alt="">
                    </a-upload>
                </div>
            </div> -->
        </a-tab-pane>
      </a-tabs>
      <a-modal
        :closable="false"
        style="width:550px;"
        dialogClass="success"
        :maskClosable="false"
        :visible="visible"
    >
        <template #footer>
        <a-button size="large" type="primary" @click="visible = false">我知道了</a-button>
        </template>
        <template #title>
        <a-icon style="color:#FFBE37;" type="info-circle" />
        <span style="display:inline-block;margin-left:10px;color:#333333;">提示信息</span>
        </template>
        <div class="successModel">
        <span>您的认证信息正在审核中...</span>
        </div>
    </a-modal>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
import DisabilityCertification from '@/components/popup/register/DisabilityCertification.vue'
import VolunteerCertification from '@/components/popup/register/VolunteerCertification.vue'
// 根据身份证号获取年月日
function getBirthdayFromIdCard(idCard) {
    var birthday = "";
    if(idCard != null && idCard != ""){
        if(idCard.length == 15){
            birthday = "19"+idCard.substr(6,6);
        } else if(idCard.length == 18){
            birthday = idCard.substr(6,8);
        }

        birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
    }

    return birthday;
}
export default {
  components: { DisabilityCertification, VolunteerCertification },
    data(){
        return {
            visible:false,
            // 级联选择字段修改
            fieldNames:{
                label: 'name',
                value: 'code',
                children: 'children'
            },
            listTree:[], //残疾类别、等级  二级数组
            authentication:false,
            loading: false,
            imageUrl: '',
            userNo:null,
            // 手机号
            phone:"",
            // 性别
            sex:"",
            // 姓名
            name:"",
            // 出生日期
            birthday:"",
            // 行业信息
            occupationCode:"",
            // 居住地
            pgAddressNo:"",
            disaAuthFlag:"", // 是否是残疾人认证
            voluntAuthFlag:"", // 是否是志愿者认证
            userInfo:null,
            onLoading:false
        }
    },
    computed: {
        // 计算属性的 getter
        getage: function () {
            // `this` 指向 vm 实例
            let age
            if(this.userInfo && this.userInfo.idNo){
                age = new Date().getTime()-new Date(getBirthdayFromIdCard(this.userInfo.idNo)).getTime();
            }else{
                age = new Date().getTime()-new Date(this.birthday).getTime();
            }
            return parseInt(age/1000/60/60/24/365);
        },
        idNo:function(){
            return this.userInfo && this.userInfo.idNo?this.userInfo.idNo.substr(0,6)+'********'+this.userInfo.idNo.substr(14,17):""
        },
        disaNo:function(){
            return this.userInfo.disaNo?this.userInfo.disaNo.substr(0,6)+'********'+this.userInfo.disaNo.substr(16,19):""
        },
    },
    mounted(){
        this.phone = this.$store.state.userName;
        this.getUserInfo();
        this.getlistTree();
    },
    methods:{
        // 关闭认证选项
        clearflag(){
            this.authentication = false;
            // this.$store.commit('changepwdFlag','');
            // this.$store.commit('changeroleType','');
            // this.$store.commit('changemobile','');
            // this.$store.commit('changepicture','');
            // this.$store.commit('changeToken','');
            // this.$store.commit('changeuserName','');
        },
        // 获取残疾类别、等级数组
        getlistTree(){
            this.$ajax({
                url:"/news/code/list/disab/tree",
                method:"post",
            }).then((res)=>{
                if(res.code == 200){
                    this.listTree = res.data;
                }
            })
        },
        disavilityFlag(){
            if(this.userInfo.auditStatus == 1){
                this.visible = true;
            }else if(this.userInfo.voluntAuthFlag == 'Y' || this.$store.state.roleType == 3){
                this.$refs['DisabilityCertification'].userInfo = this.userInfo;
                this.$refs['DisabilityCertification'].visible = true;
            }else{
                this.$refs['DisabilityCertification'].visible = true;
            }
        },
        VolunteerFlag(){
            if(this.userInfo.auditStatus == 1){
                this.visible = true;
            }else{
                this.$refs['VolunteerCertification'].visible = true;
            }
        },
        // 获取个人信息
        getUserInfo(){
            this.onLoading = true
            // this.$store.commit('changonLoading',true);
            this.$ajax({
                url:"/user/userinfo/info/detail",
                method:"post",
                params:{}
            }).then((res)=>{
                if(res.code == 200){
                    this.onLoading = false
                    if(res.data){
                        this.userNo = res.data.userNo;
                        this.sex = res.data.sex;
                        this.name = res.data.name;
                        this.birthday = res.data.birthday;
                        this.pgAddressNo = res.data.pgAddressNo;
                        this.occupationCode = res.data.occupationCode;
                        this.disaAuthFlag = res.data.disaAuthFlag;
                        this.voluntAuthFlag = res.data.voluntAuthFlag;
                        this.userInfo = res.data;
                        this.phone = res.data.userName;
                        this.$store.commit('changenickName',res.data.nickName);
                        // this.$store.commit('changeresumeNo',res.data.resumeNo);
                        // this.$store.commit('changepwdFlag',res.data.pwdFlag);
                        this.$store.commit('changeroleType',res.data.roleType);
                        this.$store.commit('changemobile',res.data.userName);
                        // this.$store.commit('changesex',res.data.sex);
                        // this.$store.commit('changepicture',res.data.picture);
                        // this.$store.commit('changeToken',res.data.token);
                        this.$store.commit('changeuserName',res.data.userName);
                        if(res.data.disaAuthFlag == 'Y'){
                            this.authentication = false;
                            this.$store.commit('changeroleType',2);
                        }else if(res.data.voluntAuthFlag == 'Y'){
                            this.authentication = false;
                            this.$store.commit('changeroleType',3);
                        }
                    }
                }else{
                    this.onLoading = false
                    // 登录失效 清空储存状态
                    this.$message.error(res.msg)
                    this.$store.commit('changeToken','');
                    this.$store.commit('changeuserName','');
                    this.$store.commit('changeroleType','');
                    this.$store.commit('changesex','');
                    this.$router.push("/")
                }
                // this.$store.commit('changonLoading',false);
            })
        },
        // 获取行业列表
        getjobList(){
            this.$ajax({
                url:"",
                method:"post",
                params:{

                }
            })
        },
        // 修改个人信息
        changeMyMsg(e){
            if(this[e]){
                let _params = {
                    // sex:this.sex,
                    // name:this.name,
                    // birthday:this.birthday,
                    // pgAddressNo:this.pgAddressNo,
                    // occupationCode:this.occupationCode
                };
                _params[e] = this[e];
                // if(this.userNo){
                //     _params['userNo'] = this.userNo;
                // }
                this.$ajax({
                    url:'/user/userinfo/save',
                    method:"post",
                    params:_params
                }).then((res)=>{
                    if(res.code == 200){
                        this.$message.success(res.msg);
                        this.getUserInfo();
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }else{
                switch(e) {
                    case 'sex': // 性别
                        this.$message.error('请选择性别！');
                        break;
                    case 'birthday':  // 出生日期
                        this.$message.error('请选择出生日期！');
                        break;
                    case 'occupationCode':   //  行业信息
                        this.$message.error('请输入行业信息！');
                        break;
                    case 'pgAddressNo':   //   居住地
                        this.$message.error('请输入居住地！');
                        break;
                    // default:
                } 
            }
        },
        // 修改手机号
        changePhone(){
            this.$router.push("/personalCenter/changePhone");
        },
        birthdaychange(value, mode){
            this.birthday = mode
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl => {
                this.imageUrl = imageUrl;
                this.loading = false;
                });
            }
        },
        beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error('You can only upload JPG file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        },
        sexChange(value) {
            this.sex = value;
        },
    }
}
</script>

<style scoped lang="less">
    /deep/.ant-cascader-picker-disabled{
        color: #666666;
        background: #ffffff;
    }
    /deep/.ant-upload.ant-upload-select-picture-card{
        width: 210px;
        height: 147px;
        border: 0;
        margin-right: 50px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    /deep/.ant-upload.ant-upload-select-picture-card > .ant-upload{
        padding: 0;
    }
    /deep/.ant-input-disabled{
        background: #FFFFFF;
        color: #333333;
    }
    .infomation{
        .ant-tabs-tabpane-active{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .certificates{
            margin-left: 56px;
            display: flex;
            .left{
                .title{
                    margin-top: 9px;
                    margin-bottom: 16px;
                    font-size: 15px;
                    color: #333333;
                    line-height: 21px;
                }
                .content{
                    display: flex;
                }
            }
            .right{
                .title{
                    margin-top: 9px;
                    margin-bottom: 16px;
                    font-size: 15px;
                    color: #333333;
                    line-height: 21px;
                }
            }
        }
        .form{
            width: 437px;
            display: flex;
            align-items: center;
            margin-left: 56px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #EEEEEE;
            .title{
                width: 80px;
                color: #666666;
                font-size: 16px;
            }
            .message{
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                line-height: 22px;
            }
            /deep/.ant-input,.ant-calendar-picker,.ant-select{
                flex: 1;
                border: 0 !important;
                list-style: none;
                box-shadow: none !important;
            }
            /deep/.ant-select-selection{
                border: 0 !important;
                list-style: none;
                box-shadow: none !important;
            }
            .func{
                cursor: pointer;
                color: #999999;
                font-size: 13px;
            }
            i{
                width: 18px;
                height: 18px;
                cursor: pointer;
            }
            .btn{
                padding: 0 10px;
                border: 1px solid #FFBE37;
                color: #FFBE37;
                font-size: 16px;
                line-height: 30px;
                margin-left: 24px;
                cursor: pointer;
            }
        }
        // .form:nth-child(7){
        //     border: 0;
        // }
        .certificationType{
            margin-top: 20px;
            margin-left: 56px;
            margin-bottom: 56px;
            display: flex;
            div{
                width: 118px;
                height: 144px;
                margin-right: 31px;
                background: #FFFFFF;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
                border-radius: 4px;
                text-align: center;
                padding-top: 24px;
                cursor: pointer;
                img{
                    width: 48px;
                    height: 48px;
                }
                .type{
                    margin-top: 11px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333333;
                    line-height: 20px;
                }
                .benefit{
                    font-size: 12px;
                    margin-top: 8px;
                    color: #999999;
                    line-height: 17px;
                }
            }
        }
    }
</style>
